<template>
	<view class="nav-page">
		<view class="card">
			<map class="map" :latitude="center.latitude" :longitude="center.longitude" :scale="16" :markers="markers"
				:show-location="true">
			</map>
			<view class="info">
				<view class="text">
					<view class="name">{{ name }}</view>
					<view class="addr">{{ address }}</view>
				</view>
				<button class="go-btn" @click="goDetailPage()">导航</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				address: '',
				center: {
					latitude: 0,
					longitude: 0
				},
				target: {
					latitude: 0,
					longitude: 0
				},
				markers: []
			};
		},
		onLoad() {
			this.init();
		},
		methods: {
			init() {
				let selected = null;
				try {
					selected = uni.getStorageSync('selectedStation') || null;
				} catch (e) {}
				// 获取当前位置作为地图中心
				uni.getLocation({
					type: 'gcj02 ',
					success: (res) => {
						this.center = {
							latitude: res.latitude,
							longitude: res.longitude
						};
						if (selected && selected.latitude && selected.longitude) {
							this.name = selected.name || this.name;
							this.address = selected.address || this.address;
							this.image = selected.image || this.image;
							this.target = {
								latitude: Number(selected.latitude),
								longitude: Number(selected.longitude)
							};
						} else {
							// 无选择则用相对偏移模拟目标站点
							this.target = {
								latitude: res.latitude + 0.002,
								longitude: res.longitude + 0.004
							};
						}
						this.buildMarkers();
					},
					fail: () => {
						this.center = {
							latitude: 35.240,
							longitude: 113.290
						};
						if (selected && selected.latitude && selected.longitude) {
							this.name = selected.name || this.name;
							this.address = selected.address || this.address;
							this.image = selected.image || this.image; 
							this.target = {
								latitude: Number(selected.latitude),
								longitude: Number(selected.longitude)
							};
						} else {
							this.target = {
								latitude: 35.242,
								longitude: 113.294
							};
						}
						this.buildMarkers();
					}
				});
			},
			buildMarkers() {
				this.markers = [{
						id: 0,
						latitude: this.center.latitude,
						longitude: this.center.longitude,
						width: 24,
						height: 24,
						iconPath: '/static/组 8.png',
						callout: {
							content: '我的位置',
							display: 'ALWAYS',
							fontSize: 12,
							color: '#333',
							padding: 6,
							borderRadius: 6
						}
					},
					{
						id: 1,
						latitude: this.target.latitude,
						longitude: this.target.longitude,
						width: 28,
						height: 28,
						iconPath: '/static/椭圆 3 拷贝 2@2x.png',
						callout: {
							content: this.address,
							display: 'ALWAYS',
							fontSize: 12,
							color: '#333',
							padding: 6,
							borderRadius: 6
						}
					}
				];
			},
			// 统一的保存站点方法
			setSelectedStation(station) {
				if (!station) return;
				const payload = {
					name: station.name || this.name,
					address: station.address || this.address,
					latitude: Number(station.latitude ?? this.target.latitude),
					longitude: Number(station.longitude ?? this.target.longitude),
					image: station.image || this.image
				};
				try { uni.setStorageSync('selectedStation', payload); } catch (e) {}
			},
			// 跳转到导航结果页（统一方法名），供其他页复用
			goDetailPage(station) {
				this.setSelectedStation(station || { 
					latitude: this.target.latitude, 
					longitude: this.target.longitude, 
					name: this.name, 
					address: this.address,
					image: this.image 
				});
				uni.navigateTo({ url: '/pages/refuelNearby/navResult/navResult' });
			}
		}
	};
</script>

<style scoped>
	.nav-page {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		background-image: linear-gradient(to bottom, #3486FD 0%, #0A64E7 300rpx, #f5f5f5 120rpx);
		background-repeat: no-repeat;
	}

	.card {
		background: #fff;
		border-radius: 16rpx;
		padding: 12rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.map {
		width: 100%;
		height: 1230rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.info {
		margin-top: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.text {
		flex: 1;
		min-width: 0;
	}

	.name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.addr {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 0;
	}

	.go-btn {
		width: 180rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 999rpx;
		background: #2b79f5;
		color: #fff;
		border: none;
	}

	.go-btn::after {
		border: none;
	}
</style>